<!-- dropdown button used for the menu to display the reference options -->
{{ define "pkg-config-input-reference-dropdown" }}
  <div class="btn-group btn-group-sm dropstart" role="group">
    <button type="button" class="btn btn-sm border" data-bs-toggle="dropdown" aria-expanded="false">
      <i class="bi bi-link-45deg"></i>
    </button>
    <ul class="dropdown-menu p-0">
      <li>
        <button
          class="dropdown-item btn btn-sm"
          hx-get="{{ .PackageHref }}/configuration/{{ .ValueName }}?refKind=Secret&repositoryName={{ .RepositoryName }}&version={{ .SelectedVersion | UrlEscape }}"
          hx-target="#{{ .ContainerId }}"
          hx-select="#{{ .ContainerId }}"
          hx-swap="outerHTML">
          Value from Secret
        </button>
      </li>
      <li>
        <button
          class="dropdown-item btn btn-sm"
          hx-get="{{ .PackageHref }}/configuration/{{ .ValueName }}?refKind=ConfigMap&repositoryName={{ .RepositoryName }}&version={{ .SelectedVersion | UrlEscape }}"
          hx-target="#{{ .ContainerId }}"
          hx-select="#{{ .ContainerId }}"
          hx-swap="outerHTML">
          Value from ConfigMap
        </button>
      </li>
      <li>
        <button
          class="dropdown-item btn btn-sm"
          hx-get="{{ .PackageHref }}/configuration/{{ .ValueName }}?refKind=Package&repositoryName={{ .RepositoryName }}&version={{ .SelectedVersion | UrlEscape }}"
          hx-target="#{{ .ContainerId }}"
          hx-select="#{{ .ContainerId }}"
          hx-swap="outerHTML">
          Value from Package Configuration
        </button>
      </li>
      {{ if ne .ValueReferenceKind "" }}
        <li><hr class="dropdown-divider m-0" /></li>
        <li>
          <button
            class="dropdown-item btn btn-sm"
            hx-get="{{ .PackageHref }}/configuration/{{ .ValueName }}?repositoryName={{ .RepositoryName }}&version={{ .SelectedVersion | UrlEscape }}"
            hx-target="#{{ .ContainerId }}"
            hx-select="#{{ .ContainerId }}"
            hx-swap="outerHTML">
            Remove Reference
          </button>
        </li>
      {{ end }}
    </ul>
  </div>
{{ end }}


<!-- template used to display and input reference information -->
{{ define "pkg-config-input-reference" }}
  <span class="input-group-text bg-transparent">Value from {{ .ValueReferenceKind }}</span>
  <input type="hidden" name="{{ .FormValueName }}[refKind]" value="{{ .ValueReferenceKind }}" />
  {{ if or (eq .ValueReferenceKind "ConfigMap") (eq .ValueReferenceKind "Secret") }}
    <input
      type="text"
      autocomplete="off"
      {{ if .Autofocus }}autofocus{{ end }}
      id="input-{{ .ValueName }}-namespace"
      name="{{ .FormValueName }}[namespace]"
      {{ if (ne .ValueReference.ConfigMapRef nil) }}
        value="{{ .ValueReference.ConfigMapRef.Namespace }}"
      {{ else if (ne .ValueReference.SecretRef nil) }}
        value="{{ .ValueReference.SecretRef.Namespace }}"
      {{ end }}
      list="{{ .ValueName }}-namespaces"
      class="form-control"
      placeholder="Namespace"
      aria-label="Namespace" />
    {{ template "components/datalist" ForDatalist .ValueName "namespaces" .DatalistOptions.Namespaces }}
    <input
      type="text"
      autocomplete="off"
      name="{{ .FormValueName }}[name]"
      {{ if ne .ValueReference.ConfigMapRef nil }}
        value="{{ .ValueReference.ConfigMapRef.Name }}"
      {{ else if (ne .ValueReference.SecretRef nil) }}
        value="{{ .ValueReference.SecretRef.Name }}"
      {{ end }}
      id="input-{{ .ValueName }}-name"
      list="{{ .ValueName }}-names"
      class="form-control"
      placeholder="Name"
      aria-label="Name"
      hx-get="/datalists/{{ .ValueName }}/names?refKind={{ .ValueReferenceKind }}&id={{ .ValueName }}-names"
      hx-include="#input-{{ .ValueName }}-namespace"
      hx-swap="outerHTML"
      hx-target="#{{ .ValueName }}-names"
      hx-select="#{{ .ValueName }}-names"
      hx-trigger="change from:previous input" />
    {{ template "components/datalist" ForDatalist .ValueName "names" .DatalistOptions.Names }}
    <input
      type="text"
      autocomplete="off"
      name="{{ .FormValueName }}[key]"
      {{ if ne .ValueReference.ConfigMapRef nil }}
        value="{{ .ValueReference.ConfigMapRef.Key }}"
      {{ else if (ne .ValueReference.SecretRef nil) }}
        value="{{ .ValueReference.SecretRef.Key }}"
      {{ end }}
      list="{{ .ValueName }}-keys"
      class="form-control"
      placeholder="Key"
      aria-label="Key"
      hx-get="/datalists/{{ .ValueName }}/keys?refKind={{ .ValueReferenceKind }}&id={{ .ValueName }}-keys"
      hx-include="#input-{{ .ValueName }}-namespace,#input-{{ .ValueName }}-name"
      hx-swap="outerHTML"
      hx-target="#{{ .ValueName }}-keys"
      hx-select="#{{ .ValueName }}-keys"
      hx-trigger="change from:previous input" />
    {{ template "components/datalist" ForDatalist .ValueName "keys" .DatalistOptions.Keys }}
  {{ else if eq .ValueReferenceKind "Package" }}
    <input
      type="text"
      autocomplete="off"
      {{ if .Autofocus }}autofocus{{ end }}
      name="{{ .FormValueName }}[package]"
      id="input-{{ .ValueName }}-name"
      {{ if ne .ValueReference.PackageRef nil }}value="{{ .ValueReference.PackageRef.Name }}"{{ end }}
      list="{{ .ValueName }}-names"
      class="form-control"
      placeholder="Package"
      aria-label="Package" />
    {{ template "components/datalist" ForDatalist .ValueName "names" .DatalistOptions.Names }}
    <input
      type="text"
      autocomplete="off"
      name="{{ .FormValueName }}[value]"
      {{ if ne .ValueReference.PackageRef nil }}value="{{ .ValueReference.PackageRef.Value }}"{{ end }}
      class="form-control"
      list="{{ .ValueName }}-keys"
      placeholder="Value"
      aria-label="Value"
      hx-get="/datalists/{{ .ValueName }}/keys?refKind={{ .ValueReferenceKind }}&id={{ .ValueName }}-keys"
      hx-include="#input-{{ .ValueName }}-name"
      hx-swap="outerHTML"
      hx-target="#{{ .ValueName }}-keys"
      hx-select="#{{ .ValueName }}-keys"
      hx-trigger="change from:previous input" />
    {{ template "components/datalist" ForDatalist .ValueName "keys" .DatalistOptions.Keys }}
  {{ end }}
{{ end }}

{{ define "pkg-config-input-text" }}
  <input
    type="text"
    autocomplete="off"
    {{ if .Autofocus }}autofocus{{ end }}
    name="{{ .FormValueName }}"
    value="{{ .StringValue }}"
    class="form-control"
    id="{{ .FormId }}"
    {{ if .ValueDefinition.Constraints.Required }}required{{ end }}
    {{ if ne .ValueDefinition.Constraints.MinLength nil }}
      minlength="{{ .ValueDefinition.Constraints.MinLength }}"
    {{ end }}
    {{ if ne .ValueDefinition.Constraints.MaxLength nil }}
      maxlength="{{ .ValueDefinition.Constraints.MaxLength }}"
    {{ end }}
    {{ if ne .ValueDefinition.Constraints.Pattern nil }}
      pattern="{{ .ValueDefinition.Constraints.Pattern }}"
    {{ end }}
    aria-describedby="input-help-{{ .ValueName }}" />
{{ end }}

{{ define "pkg-config-input-number" }}
  <input
    type="number"
    autocomplete="off"
    {{ if .Autofocus }}autofocus{{ end }}
    {{ if .ValueDefinition.Constraints.Required }}required{{ end }}
    {{ if ne .ValueDefinition.Constraints.Min nil }}min="{{ .ValueDefinition.Constraints.Min }}"{{ end }}
    {{ if ne .ValueDefinition.Constraints.Max nil }}max="{{ .ValueDefinition.Constraints.Max }}"{{ end }}
    name="{{ .FormValueName }}"
    value="{{ .StringValue }}"
    class="form-control"
    id="{{ .FormId }}"
    aria-describedby="input-help-{{ .ValueName }}" />
{{ end }}

{{ define "pkg-config-input-options" }}
  <select
    class="form-select"
    {{ if .Autofocus }}autofocus{{ end }}
    id="{{ .FormId }}"
    name="{{ .FormValueName }}"
    {{ if .ValueDefinition.Constraints.Required }}required{{ end }}>
    <option value="" {{ if eq "" .StringValue }}selected{{ end }}></option>
    {{ range .ValueDefinition.Options }}
      <option value="{{ . }}" {{ if eq . $.StringValue }}selected{{ end }}>{{ . }}</option>
    {{ end }}
  </select>
{{ end }}

{{ define "pkg-config-input-boolean" }}
  <div class="form-check my-auto ms-2">
    <input
      class="form-check-input"
      {{ if .Autofocus }}autofocus{{ end }}
      type="checkbox"
      name="{{ .FormValueName }}"
      id="{{ .FormId }}"
      {{ if .BoolValue }}checked{{ end }} />
    <label class="form-check-label me-1" for="{{ .FormId }}">{{ .FormLabel }}</label>(<code>{{ .ValueName }}</code>)
  </div>
{{ end }}

{{ define "pkg-config-input-help" }}
  <div id="input-help-{{ .ValueName }}" class="form-text">
    {{ .ValueDefinition.Metadata.Description | Markdown }}
  </div>
{{ end }}

{{ define "pkg-config-input-value-error" }}
  {{ if .ValueError }}
    <div class="alert alert-warning small p-1 my-1" role="alert">
      <i class="bi bi-exclamation-triangle-fill"></i>
      {{ .ValueError }}
    </div>
  {{ end }}
{{ end }}

{{ define "pkg-config-input-required-label" }}
  <label for="{{ .FormId }}" class="form-label mb-0">
    {{ .FormLabel }}
    {{ if .ValueDefinition.Constraints.Required }}
      <span class="text-danger">*</span>
    {{ end }}
    (<code>{{ .ValueName }}</code>)
  </label>
{{ end }}


<!-- this is the entry point for rendering the input group for one value definition -->
{{ define "components/pkg-config-input" }}
  <div id="{{ .ContainerId }}" class="mb-2">
    {{ if eq .ValueDefinition.Type "text" }}
      <div>
        {{ template "pkg-config-input-required-label" . }}
        <div class="input-group input-group-sm">
          {{ template "pkg-config-input-reference-dropdown" . }}
          {{ if eq .ValueReferenceKind "" }}
            {{ template "pkg-config-input-text" . }}
          {{ else }}
            {{ template "pkg-config-input-reference" . }}
          {{ end }}
        </div>
        {{ template "pkg-config-input-value-error" . }}
        {{ template "pkg-config-input-help" . }}
      </div>
    {{ else if eq .ValueDefinition.Type "number" }}
      <div>
        {{ template "pkg-config-input-required-label" . }}
        <div class="input-group input-group-sm">
          {{ template "pkg-config-input-reference-dropdown" . }}
          {{ if eq .ValueReferenceKind "" }}
            {{ template "pkg-config-input-number" . }}
          {{ else }}
            {{ template "pkg-config-input-reference" . }}
          {{ end }}
        </div>
        {{ template "pkg-config-input-value-error" . }}
        {{ template "pkg-config-input-help" . }}
      </div>
    {{ else if eq .ValueDefinition.Type "boolean" }}
      <div>
        {{ if ne .ValueReferenceKind "" }}
          {{ template "pkg-config-input-required-label" . }}
        {{ end }}
        <div class="input-group input-group-sm">
          {{ template "pkg-config-input-reference-dropdown" . }}
          {{ if eq .ValueReferenceKind "" }}
            {{ template "pkg-config-input-boolean" . }}
          {{ else }}
            {{ template "pkg-config-input-reference" . }}
          {{ end }}
        </div>
        {{ template "pkg-config-input-value-error" . }}
        {{ template "pkg-config-input-help" . }}
      </div>
    {{ else if eq .ValueDefinition.Type "options" }}
      <div>
        {{ template "pkg-config-input-required-label" . }}
        <div class="input-group input-group-sm">
          {{ template "pkg-config-input-reference-dropdown" . }}
          {{ if eq .ValueReferenceKind "" }}
            {{ template "pkg-config-input-options" . }}
          {{ else }}
            {{ template "pkg-config-input-reference" . }}
          {{ end }}
        </div>
        {{ template "pkg-config-input-value-error" . }}
        {{ template "pkg-config-input-help" . }}
      </div>
    {{ end }}
  </div>
{{ end }}
